<template>
  <view class="home">
	  
    <uni-search-bar @confirm="doSearch" @input="" @v-model="searchKey"/>
    <swiper 
	indicator-color="#"
	indicator-active-color="#fffff6700"
	style="height: 300px; ":indicator-dots="true" :autoplay="true" 
	:interval="3000" :duration="1000" >
      <swiper-item v-for="(item,index) in bannerGoodsList" :key="index">
        <view class="swiper-item">
          <image  style="width: 100%; height: 300px;" :src="item.goods_big_logo" mode="widthFix"></image>
        </view>
      </swiper-item>
    </swiper>
	<view class="onlist">
	  <view class="item" v-for="(item,index) in oneList" :key="index">
	    <image class="logo" :src="item.icon" mode=""></image>
	    <view class="name">{{item.name}}</view>
	  </view>
	  </view>
  </view>
 
   <view class="selected">
           <view class="item" v-for="(item,index) in selectedteList" :key="indexs">
               <view class="pic">
                   <image :src="item.goods_big_logo" mode=""></image>
               </view>
			   <view class="name">{{item.name}}
			   </view>
               <view class="info">
                 <view class="price">
                       ￥{{item.price}}</view>
                     <view class="tag">
						 精选
					 </view>
   
                   </view>
               </view>
           </view>
</template>
<script setup>
  import {
	  ref,
	  } from 'vue'
  import {onLoad}  from'@dcloudio/uni-app'
 
  let searchKey=ref("")
 let bannerGoodsList = ref([])
  onLoad(()=>{
	  getBanner()
	  getCateOneLst()
	getSelectedGoods()

  })
 
  function doSearch()
    {
      uni.showToast({
      	icon:'none',
		title: searchKey.value
      })
    }
	// 轮播图
	
	// 获取轮播图图片
	async function getBanner() {
		let res=await uni.$post("/goodsPromoteSelect", {
	    "is_selected": 0,
	    "is_promote": 1,
	    "page": 1,
	    "number": 5
	  })
	   bannerGoodsList.value = res.goodsList.map(item =>{
	 item.goods_big_logo= uni.$base_url+item.goods_big_logo
	    return item
		})
	 console.log(bannerGoodsList.value)
	 }
const oneList=ref([])
	async function getCateOneLst() {
		   let res= await uni.$post("/categoryListLevel", {
		    "level": 0
		  })
		    if (res.code == 200) {
				console.log(res)
		      oneList.value = res.result.map(item => {
		        item.icon = uni.$base_url + item.icon
		        return item
		      })
		       console.log(oneList.value)
		    }
		}
// 精选商品列表
const selectedteList = ref([])
 async function getSelectedGoods() {
 let res= await uni.$post("/goodsPromoteSelect", {
    "is_selected": 1,
    "is_promote": 0,
    "page": 1,
    "number": 100
  })
    // console.log(res)
    if (res.code == 200) {
      selectedteList.value = res.goodsList.map(item => {
        item.goods_big_logo = uni.$base_url + item.goods_big_logo
        return item;
      })
      console.log(selectedteList.value);
	}}

</script>
   

<style>
	.home{background-color: gainsboro;}
/* 商品分类容器 */
    .onlist {
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    margin: 10rpx 0 10rpx 0;
    }
    /* 每个商品分类 */
    .onlist>.item {
      width: 130rpx;
      height: 130rpx;
      /* border:1px solid red; */
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 20rpx;

    }
      /* 商品分类中图片 */
      .onlist>.item>.logo {
        width: 60rpx;
        height: 60rpx;
        margin-top: 20rpx;
      }
	   .onlist>.item>.logo>image{
		   width: 100%;
		   height: 100%;
	   }
	   .selected{
		   
		   display: flex;
		   flex-wrap:wrap;
		   justify-content: space-evenly;
	   }
	   .selected>.item{
		   width: 350rpx;
		
		   border: 1px solid #eee;
		   box-shadow: 3px 3px 3px #eee;
		   border-radius: 10px;
		   margin-bottom: 5px;
	   }
	   .selected>.item>.pic{
		 width: 320rpx;
		 height: 200px;
		 border: 1px solid #ccc;  
		 margin: 15rpx;
	   }
	    .selected>.item>.pic>image{
			width: 100%;
			height: 100%;
		}
		.selected>.item>.name{
			padding: 0 15rpx 0 15rpx;
			font-size: 26rpx;
			color: #666;
			 overflow: hidden;
			 -webkit-line-clamp: 2;  
			 text-overflow: ellipsis;
			 display: -webkit-box;
			 -webkit-box-orient: vertical;
		}
		.selected>.item>.info{
			display: flex;
			justify-content: space-between;

			padding: 0 15rpx 15rpx 15rpx;
		}
		.selected>.item>.info>.price{
			color: #ff6700;
		}
		.selected>.item>.info>.tag{
			background-color: #ff6700;
			color: #fff;
			font-size: 24rpx;
			padding: 3px 5px;
			border-radius: 10px;
			}
</style>